<template>
  <div class="app-container">
    <tree-table :data="data" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" border>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册数">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="left">
            <div class="processContainer">
              {{scope.row.regC}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="点击数">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="left">
            <div class="processContainer">
              {{scope.row.clickC}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="分享数">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="left">
            <div class="processContainer">
              {{scope.row.shareC}}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </tree-table>
  </div>
</template>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import treeTable from "@/components/TreeTable";
import treeToArray from "./customEval";
import { Loading } from "element-ui";

export default {
  name: "customTreeTableDemo",
  components: { treeTable },
  data() {
    return {
      func: treeToArray,
      expandAll: false,
      data2: {},
      data: {
        id: 1,
        event: "事件1",
        timeLine: 100,
        comment: "无",
        children: [
          {
            id: 2,
            event: "事件2",
            timeLine: 10,
            comment: "无"
          },
          {
            id: 3,
            event: "事件3",
            timeLine: 90,
            comment: "无",
            children: [
              {
                id: 4,
                event: "事件4",
                timeLine: 5,
                comment: "无"
              },
              {
                id: 5,
                event: "事件5",
                timeLine: 10,
                comment: "无"
              },
              {
                id: 6,
                event: "事件6",
                timeLine: 75,
                comment: "无",
                children: [
                  {
                    id: 7,
                    event: "事件7",
                    timeLine: 50,
                    comment: "无",
                    children: [
                      {
                        id: 71,
                        event: "事件71",
                        timeLine: 25,
                        comment: "xx"
                      },
                      {
                        id: 72,
                        event: "事件72",
                        timeLine: 5,
                        comment: "xx"
                      },
                      {
                        id: 73,
                        event: "事件73",
                        timeLine: 20,
                        comment: "xx"
                      }
                    ]
                  },
                  {
                    id: 8,
                    event: "事件8",
                    timeLine: 25,
                    comment: "无"
                  }
                ]
              }
            ]
          }
        ]
      },
      args: [null, null, "timeLine"]
    };
  },
  methods: {
    message(row) {
      this.$message.info(row.event);
    },
    getinfo() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      //console.log(this.data);
      this.$store.dispatch("puser").then(data => {
        loading.close();
        this.data = data;
        //console.log(JSON.stringify(data));
        console.log(data);
      }).catch(er=>console.log(er));
    },
    edit(user) {
      console.log(user);
    }
  },
  mounted() {
    // setTimeout(this.getinfo(), 1000);
    let userinfo = this.getinfo();
    // for(let userinfo )
    // this.data="";
  }
};
</script>
